<template>
	<view >
		<div class="rounded-16 shadow p-10 between items-start w-full">
			<image @click="goTo('/pages/detail/stationDetail?id=' + item.id)" :src="item.pic" mode="aspectFill" class="w-200 h-200 rounded-16 flex-shirnk-0 mr-10">
			</image>
			<div class="flex-col pr-20 between" style="width: 450rpx;align-items: stretch;">
				<div class="between w-full mb-10" @click="goTo('/pages/detail/stationDetail?id=' + item.id)">
					<div class="flex">
						<image  :src="item.pic" mode="aspectFill" class="w-35 h-35 rounded-full"></image>
						<div  class="ellipsis" style="width:100%">{{ item.name }}</div>
					</div>
					<div class="flex text-red" >
						<image src="/static/icon/address.png" mode="widthFix" class="w-20 mr-10" style="width: 14px;height: 14px;"></image>
						{{ item.range }}km
					</div>
				</div>
				<div @click="goTo('/pages/detail/stationDetail?id=' + item.id)" class="ellipsis text-gray-600 w-full fz24">{{ item.address }}</div>
				<div @click="goTo('/pages/detail/stationDetail?id=' + item.id)" class="flex mt-10">
					<div  class="text-gray-600 fz22 border-gray-9 p-5 rounded-10 mr-10" v-if="item.is_open == 1">对外开放
					</div>
					<div  class="text-gray-600 fz22 border-gray-9 p-5 rounded-10" v-if="item.is_charge == 1">停车收费</div>
				</div>
				
				<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  class="mask"></view>
				<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  style="position: fixed;z-index: 99; background-color: #fff; font-size: 14px; line-height: 20px; padding: 20px; border-radius: 20px; top: 15%;left: 10%;width: 80%;height: 500px;overflow-y: scroll;">
					<div> <rich-text v-html="item.cost_price1"></rich-text></div>
					<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price2"></rich-text></div>
					<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price3"></rich-text></div>
					<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price4"></rich-text></div>
				</view>
				

				<div class="between fz28 mt-20">
					<div class="fz30 font-bold text-red" style="display: flex;">
						<text class="fz30 font-bold text-red">{{ item.price }}</text> <text class="text-black fz24" style="padding-top: 5rpx;">元/度 </text> <image style="padding-top: 5rpx; padding-left: 5rpx;" @click="wenhao" src="/static/wenhao.png" mode="aspectFill" class="w-30 h-30 rounded-full"></image>
					</div>
					<div class="flex" @click="goTo('/pages/detail/stationDetail?id=' + item.id)">
						<div class="flex mr-20" v-if="item.kuai_total">
							<div class="status bg-red text-white fz28 font-bold  p-5 rounded-15 w-40 h-40 center flex-shirnk-0"
								style="align-self: flex-start;">
								快
							</div>
							<div class="ml-10">  <text class="text-red">{{ item.kuai_status }}</text> /{{item.kuai_total}}</div>
						</div>
						<div class="flex" v-if="item.man_total">
							<div class="status bg-orange text-white fz28 font-bold  p-5 rounded-15 w-40 h-40 center flex-shirnk-0"
								style="align-self: flex-start;">
								慢
							</div>
							<div class="ml-10"> <text class="text-orange">{{ item.man_status }}</text> /{{item.man_total}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			wenhao_flag:false,
		}
	},
	mounted() {
		console.log(this.item)
	},
	methods: {
		goTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		wenhao(){
			this.wenhao_flag=true
		},
	}
}
</script>

<style>
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
</style>